<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

input {
  padding: 0 0 0 1px;
  width: 70%;
  margin-left: 10px;
}

textarea {
  width: 70%;
  height: 70px;
  margin-left: 10px;
  padding: 1px 0 0 2px;
}
</style>

<template>
  <!-- border: 1px solid blue -->
  <div style=" padding: 10px;height: 75vh;width: 100%;box-sizing: border-box">

    <!-- 搜索区域 -->
    <div style="margin: 0 0 10px 1px">
      <el-input @keyup="Load" v-model="data.SearchKeyWord" maxlength="30" placeholder="请输入关键字（标题和用户名字段可查）"
                style="width: 21%"
                clearable></el-input>
      <!--      <el-button @click="Load" type="primary" style="margin-left: 10px">查询</el-button>-->
    </div>

    <!--  表格  -->
    <!-- header-cell-style设置头部居中；cell-style设置单元格内容居中;stripe斑马纹 -->
    <!--  sortable实现排序按钮  -->
    <el-table
        :data="data.tableData"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        border
        stripe
        style="width: 98%; border-radius: 5px;margin-left: 1%"
    >
<!--      <el-table-column sortable fixed prop="conversationId" width="180" label="会话ID"/>-->
      <el-table-column sortable prop="title" width="280" label="标题"/>
      <el-table-column sortable prop="username" width="180" label="用户名"/>
      <el-table-column sortable prop="createTime" min-width="130" label="创建时间"/>

      <el-table-column sortable prop="isDeleted" width="180" label="状态">
        <template #default="scope">
          <span>
            {{
              scope.row.isDeleted ? '已删除' : '正常'
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column sortable fixed="right" label="操作" min-width="130">
        <template #default="scope">
          <el-button link type="primary" @click="gotoConversionDetail(scope.row.conversationId)" :icon="View">详情
          </el-button>
          <el-popconfirm title="确定永久删除吗?" @confirm="handleDelete(scope.row.conversationId)">
            <template #reference>
              <el-button type="primary" link :icon="Delete">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页  -->
    <el-pagination
        v-model:current-page="data.currentPage"
        v-model:page-size="data.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 1%"
    ></el-pagination>

  </div>

  <div style="height: 8vh;">

  </div>
</template>

<script setup>
import {reactive} from "vue";
import {Delete, View} from '@element-plus/icons-vue'
import request from "../utils/request.js";
import {useRouter} from "vue-router";
import {ElLoading} from 'element-plus';

const dataString = localStorage.getItem('data');
const userLoginData = dataString ? JSON.parse(dataString) : null;


const data = reactive({
  //弹窗默认关闭
  centerDialogVisible: false,
  //当前页
  currentPage: 1,
  //每页多少条数据
  pageSize: 5,
  //搜索输入框
  SearchKeyWord: "",
  //数据条数
  total: 0,
  //表格数据
  tableData: [],
});

const Load = () => {
// 从后端获取数据
  request.get(`/java/conversation/conversationInfo?current=${data.currentPage}&size=${data.pageSize}&SearchKeyWord=${data.SearchKeyWord}`)
      .then((response) => {
        console.log("会话管理数据：", response);

        // 提取数据
        const conversationData = response.data;

        // 按 createTime 进行排序
        // 更新表格数据
        data.tableData = conversationData.sort((a, b) => {
          const timeA = new Date(a.createTime).getTime();
          const timeB = new Date(b.createTime).getTime();
          return timeA - timeB; // 升序排序（早到晚）
        });
        data.total = conversationData.length;
      })
      .catch((error) => {
        console.error('请求发生错误:', error);
      })
};

Load()

//改变分页大小
const handleSizeChange = (pageSize) => {
  data.currentPage = 1
  data.pageSize = pageSize
  Load()
}

//去到第几页
const handleCurrentChange = (currentPage) => {
  data.currentPage = currentPage
  Load()
}

//删除
const handleDelete = (conversationId) => {
  const conversationIds = [];
  conversationIds.push(conversationId);
  request.delete(`/java/conversation/delete/${conversationIds}`).then((response) =>{
    Load();
  })
};


const router = useRouter();

//查阅点击的会话
const gotoConversionDetail = (conversionDetail) => {
  location.href = '/conversionDetail?ConversationId=' + conversionDetail
}

</script>
